<template>
  <div class="_wz_cent_main _wz_trajectory" style="height: 100%;width: 100%;">
    <div class="baidumap" id="_wz_vehicleMonitoring_allmap" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
export default {
  props: ['currentTravelLogId'],//接收来自父组件的数据
  data() {
    return {
      formData: {},
      trackData:{},

      positionTrajectory:[],//车辆定位数据
      trackSearchData: {},//轨迹搜索数据
      map: null,//地图
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    that.mapLoad();
    // that.axios.post(that.apiUrl.webApi + '/safety/drivingLog/drivingLogInfo', {uuid: that.currentTravelLogId}).then(res => {
    //   if (!!res) {
    //
    //     res.data.data.shiftList.forEach((k, i) => {
    //       if (!!k.breakPointLonX && !!k.breakPointLatY) {//行车前
    //         let myIcon = new BMap.Icon("../../static/img/vehicleImg/start_j.png", new BMap.Size(28, 32));
    //         var point = new BMap.Point(k.breakPointLonX, k.breakPointLatY);
    //         var marker = new BMap.Marker(point, {icon: myIcon});  // 创建标注
    //         marker.setZIndex(999999);
    //         that.map.addOverlay(marker);            //增加点
    //       }
    //     })
    //   }
    // }).catch(err => {
    //   console.log("失败", err)
    // })

    that.axios.post(that.apiUrl.webApi + '/safety/drivingLog/drivingLogInfo', {uuid: that.currentTravelLogId}).then(res => {
      if (!!res) {
        that.formData = res.data.data;//出车信息
        that.trackFun();


        let marker;
        if (!!that.formData.beforeCheckLonX && !!that.formData.beforeCheckLatY) {//行车前
          let myIcon = new BMap.Icon("../../static/img/vehicleImg/start_q.png", new BMap.Size(28, 32));
          var point = new BMap.Point(that.formData.beforeCheckLonX, that.formData.beforeCheckLatY);
          marker = new BMap.Marker(point, {icon: myIcon});  // 创建标注
          marker.setZIndex(999999);
          that.map.addOverlay(marker);            //增加点

          marker.addEventListener('click', function () {
            that.map.openInfoWindow(new BMap.InfoWindow('检查时间：'+that.formData.beforeCheckTime, {width: 200,height: 100,title: '出车前检查'}), point); // 开启信息窗口
          });
        }
        if (!!that.formData.midwayCheckLonX && !!that.formData.midwayCheckLatY) {//行车前
          let myIcon = new BMap.Icon("../../static/img/vehicleImg/start_z.png", new BMap.Size(28, 32));
          var point = new BMap.Point(that.formData.midwayCheckLonX, that.formData.midwayCheckLatY);
          marker = new BMap.Marker(point, {icon: myIcon});  // 创建标注
          marker.setZIndex(999999);
          that.map.addOverlay(marker);            //增加点

          marker.addEventListener('click', function () {
            that.map.openInfoWindow(new BMap.InfoWindow('检查时间：'+that.drivingLogBic.masidwayCheckTime, {width: 200,height: 100,title: '行车中检查'}), point); // 开启信息窗口
          });
        }
        if (!!that.formData.afterCheckLonX && !!that.formData.afterCheckLatY) {//行车前
          let myIcon = new BMap.Icon("../../static/img/vehicleImg/start_h.png", new BMap.Size(28, 32));
          var point = new BMap.Point(that.formData.afterCheckLonX, that.formData.afterCheckLatY);
          marker = new BMap.Marker(point, {icon: myIcon});  // 创建标注
          marker.setZIndex(999999);
          that.map.addOverlay(marker);            //增加点
          marker.addEventListener('click', function () {
            that.map.openInfoWindow(new BMap.InfoWindow('检查时间：'+that.formData.afterCheckTime, {width: 200,height: 100,title: '收车后检查'}), point); // 开启信息窗口
          });
        }

      }
    }).catch(err => {
      console.log("失败", err)
    })


  },
  methods: {//执行的方法

    //地图加载
    mapLoad() {
      let that = this;
      that.map = new BMap.Map("_wz_vehicleMonitoring_allmap");    // 创建Map实例
      that.map.centerAndZoom(new BMap.Point(105.058886,36.028623), 4);  // 初始化地图,设置中心点坐标和地图级别
      //添加地图类型控件
      that.map.addControl(new BMap.MapTypeControl({
        mapTypes: [
          BMAP_NORMAL_MAP,
          BMAP_HYBRID_MAP
        ]
      }));
      that.map.setCurrentCity("邢台");          // 设置地图显示的城市 此项是必须设置的
      that.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      // 左上角，添加比例尺
      let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});
      that.map.addControl(top_left_control);
      //左上角，添加默认缩放平移控件
      let top_left_navigation = new BMap.NavigationControl();
      that.map.addControl(top_left_navigation);
    },
    //搜索轨迹
    trackFun() {
      let that = this;
      that.trackData.carPlateNo = that.formData.vehiclePlateNo;//'冀E211N2';//
      //开始时间
      that.trackData.startTime = !!that.formData.beginDate?that.public.timeFormatting(that.formData.beginDate, "yyyy-MM-dd hh:mm:ss"):that.public.timeFormatting(new Date(), "yyyy-MM-dd hh:mm:ss");//'2021-02-25 00:00:00';//
      //结束时间
      that.trackData.endTime = !!that.formData.endDate?that.public.timeFormatting(that.formData.endDate, "yyyy-MM-dd hh:mm:ss"):that.public.timeFormatting(new Date(), "yyyy-MM-dd hh:mm:ss");//'2021-02-25 23:59:59';//
      that.spinShow = true;
      that.axios.post(that.apiUrl.positionTrajectory, that.trackData).then(res => {
        that.spinShow = false;
        if (!!res) {
          that.positionTrajectory = res.data.data;
          if (!!res.data.data && res.data.data.length > 0) {
            that.trackSearchData = res.data.data[res.data.data.length - 1]
            ///////轨迹
            let line = [];
            res.data.data.forEach(function (k, i) {
              let marker;
              let myIcon = new BMap.Icon("../../static/img/vehicleImg/gj.png", new BMap.Size(15, 15));
              marker = new BMap.Marker(new BMap.Point(k.lonX, k.latY), {icon: myIcon});  // 创建标注
              marker.setRotation(k.direction);
              marker.setZIndex(99999);

              line.push(new BMap.Point(k.lonX, k.latY));//线连接点
            })
            let polyline = new BMap.Polyline(line, {
              strokeWeight: '3',//折线的宽度，以像素为单位
              strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
              strokeColor: "#18a45b" //折线颜色
            });   //
            that.map.addOverlay(polyline);          //增加折线
            that.map.setViewport(line);

            ///////轨迹
          } else {
            that.$Message.error('暂未获得到该车辆的轨迹');
          }
        }
      }).catch(err => {
        console.log('失败', err);
      })

    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">

</style>
